<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <style>
        [v-cloak]{
            display: none;
        }

    </style>
</head>
<body style="background-color: #E2E2E2;background-image: url('/front/img/carousel/奥迪Q4e.webp');background-size: 100%">
<div id="app" class="container" v-cloak>
    <div class="row text-center" style="padding-top: 100px;">
        <div class="col-md-12">
            <h2>欢迎注册电动甄选</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
            <div class="panel-body"style="width: 100%;align-items: center">
                <form role="form"style="background-color: #b3d8ff;border-radius: 8px;padding: 20px;opacity: 0.8;">
                    <hr/>
                    <br/>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-tag"></i> </span>
                        <input type="text" class="form-control" v-model="user.name" placeholder="用户名">
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i> </span>
                        <input type="password" class="form-control" v-model="user.password" placeholder="密码">
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-lock"></i> </span>
                        <input type="password" class="form-control" v-model="user.newPassword" placeholder="确认密码">
                    </div>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-male"></i> </span>
                        <div style="margin-left: 20px;">
                            <input type="radio" name="sex" v-model="user.sex" value="男" title="男" checked>
                            <span style="margin: 0 20px 0 5px">男</span>
                            <input type="radio" name="sex" v-model="user.sex" value="女" title="女">
                            <span style="margin: 0 20px 0 5px">女</span>
                        </div>
                    </div>
                    <h5>请选择角色</h5>
                    <div class="form-group input-group">
                        <span class="input-group-addon"><i class="fa fa-user"></i> </span>
                       <select v-model="user.level" class="form-control" style="height: 35px;">
                           <option v-for="item in authorities" :value="item.level" name="level">{{item.name}}</option>
                       </select>
                    </div>
                    <div style="text-align: center;">
                        <a href="javascript:void(0)" @click="register" class="btn btn-primary">注册</a>
                    </div>
                    <hr/>
                    <div style="text-align: center;">
                        已有账号？<a href="login.html" target="_blank">点我登录</a>
                    </div>


                </form>
            </div>
        </div>
    </div>
</div>


<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                name:"",
                password:"",
                newPassword: "",
                sex: "男",
                level: 3

            },
            authorities: [],
        },
        created: function (){
          axios.get("/getAuthority").then(res => {
              if (res.data.code === '0'){
                  let list = res.data.data;
                  this.authorities = list.filter(item => item.level !== 1);
              }else {
                  alert(res.data.msg);
              }

          } );
        },
        methods: {
            register() {
                if (!this.user.name){
                    alert("请输入用户名");
                    return
                }
                if (!this.user.password ||!this.user.newPassword){
                    alert("请输入密码");
                    return
                }
                if (this.user.password !==this.user.newPassword){
                    alert("两次密码输入不一致");
                    return
                }
                if (!this.user.level){
                    alert("请请选择角色");
                    return
                }
                axios.post("/register", this.user).then(res => {
                    if(res.data.code === '0'){
                        localStorage.setItem('user', JSON.stringify(res.data.data));
                        window.location = '/front/index.html';
                    }else {
                        alert(res.data.msg);
                    }
                });
            }
        }

    });
</script>
</body>
</html>